
#include('/head.html', {title : '搜索'})
<link rel="stylesheet" type="text/css" href="/static/css/default.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="/static/css/search-form.css" />
<style>
   body{
    background-color:#f2f4f8;
  }
  @media (max-width:768px){
   #footer{
        position: fixed;
        text-align: center;
        width: 100%;
        bottom: 0px;
    }
  }
  @media (max-height:640px){
    .search-wrapper{
      top:520px!important;
    }
  }
  <!--@media (max-height:597px){-->
    <!--.search-wrapper{-->
      <!--top:90%!important;-->
    <!--}-->
    <!--#footer{-->
      <!--display:none!important;-->
    <!--}-->
  <!--}-->
  @media (max-height:563px){
    .search-wrapper{
      display:none!important;
    }
  }
</style>
<body class=""
      style="background:url(/static/images/image.jpg) ;background-size: cover; background-attachment: fixed;background-repeat: no-repeat;"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<section class="vbox" id="app">
    #include('/header.html')
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
        <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
          #include('/list.html')
        </aside>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
            <section class="scrollable padder">
              <!--<div class="m-b-md">-->
                <!--<h3 class="m-b-none">Datatable</h3>-->
              <!--</div>-->
              <form action="/search" method="get">
                <div class="search-wrapper" style="top:80%;">
                  <div class="input-holder">
                    <input type="text" class="search-input" placeholder="请输入关键词" name="key" value="${key}"/>
                    <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
                  </div>
                  <span class="close" onClick="searchToggle(this, event);"></span>
                  <div class="result-container">
                  </div>
                </div>
              </form>
              <section class="panel panel-default" style="height: 400px;margin-top: 20px;">
              <header class="panel-heading">
              搜索结果：
              <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
              </header>
              <div class="table-responsive">
                #if(result.getTotalRows()>0)
              <table class="table table-striped m-b-none" data-ride="datatables" >
              <thead >
              <tr>
              <th  >姓名</th>
              <th  >性别</th>
              <th  >组别</th>
              <th  >年级</th>
              <th  >操作</th>
              </tr>
              </thead>
              <tbody>
              #set(j=0)
              #for(Users user: result.getRows())
              <tr>
                <td  style="width:20%">${user.m_realname}</td>
                <td  style="width:25%">
                  #if(user.m_sex==1)
                  男
                  #elseif(user.m_sex==2)
                  女
                  #else
                  未设置
                  #end
                </td>
                <td  style="width:25%">${groupResult[j][0].g_gname}</td>
                <td  style="width:15%">${user.m_studentNumber.substring(0,4)}</td>
                <td  style="width:15%"><a href="/users/${user.m_id}">查看详情</a></td>
              </tr>
              #set(j=j+1)
              #end
              </tbody>
              </table>
                <div class="text-center">
                  #if(result.totalPages==0)
                  #set(totalPages=1)
                  #else
                  #set(totalPages=result.totalPages)
                  #end
                  <ul class="pagination pagination text-center">
                    <li><a href="/search?key=${key}&pageNo=${result.pageNum-1 > 0 ? result.pageNum-1 : 1 }"><i class="fa fa-chevron-left"></i></a></li>
                    #for(int i : range(1, result.totalPages))
                    <li class="${i == result.pageNum  ? 'active':''}"><a href="/search?key=${key}&pageNo=${i}">${i}</a></li>
                    #end

                    <li><a href="/search?key=${key}&pageNo=${result.pageNum+1 > totalPages ? totalPages : result.pageNum+1}"><i class="fa fa-chevron-right"></i></a></li>
                  </ul>
                </div>

                #else
                <div style="text-align:center;margin:20px 10px;">未查询到相关用户。</div>
                #end
              </div>

              </section>
            </section>
            #include('footer.html')
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>
  </section>

<script>
  new Vue({
      el : '#app',
  })
</script>
  #include('js.html')
<script type="text/javascript">
function searchToggle(obj, evt){
	var container = $(obj).closest('.search-wrapper');

	if(!container.hasClass('active')){
		  container.addClass('active');
		  evt.preventDefault();
	}
	else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
		  container.removeClass('active');
		  // clear input
		  container.find('.search-input').val('');
		  // clear and hide result container when we press close
		  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
	}
}

function submitFn(obj, evt){
	value = $(obj).find('.search-input').val().trim();

	_html = "您搜索的关键词： ";
	if(!value.length){
		_html = "关键词不能为空。";
	}
	else{
		_html += "<b>" + value + "</b>";
	}

	evt.preventDefault();
}
</script>
</body>
</html>